<template>
    <div class="dataSourceManagement">
        <div class="box box-top">
            用户信息管理
            <div class="L-search-box L-box">
                <el-input
                    placeholder="用户名"
                    prefix-icon="el-icon-search"
                    class="L-search-input"
                    v-model="sourceName"
                >
                </el-input>
                <dataSourceType class="L-s" v-model="sourceType" />
                <el-button class="L-s" type="primary" @click="searchapi()">查询</el-button>
            </div>
        </div>
        <div class="box box-top">
            <div class="box-flex">
                <div>
                    <el-button type="primary" @click="newDataSource('new')">+ 新建</el-button>
                </div>
                <el-button type="danger" @click="del()" :disabled="delDis">批量删除</el-button>
            </div>
            <Table :tabledata="table" @selection="selectionChange" @row="row" class="table" />
        </div>
        <!-- ==================  Start  编辑弹窗   =================== -->
        <Add :addVisible="addVisible" @cancel="cancel" :titlename="titlename"  :newDis="newDis"  :editRow="editRow" />
    </div>
</template>

<script>
import dataSourceType from '@/components/DataSourceType'
import Add from '@/views/userManagement/new'
import Table from '@/components/Table'
export default {
    name: 'index',
    components: {
        dataSourceType,
        Table,
        Add
    },
    data() {
        return {
            addVisible: false, //弹出框显示
            newDis:false, //是否可编辑
            editRow:{}, //行信息
            titlename: '', //标题
            sourceType: '', // 性别类型
            sourceName: '', // 用户名
            title: '', // 新建/编辑title
            table: {
                headerCellClassName: 'g-table-header-cell',
                loading: false,
                headerCellStyle: { background: '#EEF3FD', color: '#505F7B' },
                cellStyle: { color: '#505F7B' },
                // height: '498',
                uid: '',
                list: [],
                datalist: [
                    {
                        type: 'selection',
                        width: '45'
                    },
                    {
                        prop: 'sourceName',
                        label: '用户名',
                        width: 60
                    },
                    {
                        prop: 'sex',
                        label: '性别',
                        width: 25
                    },
                    {
                        prop: 'age',
                        label: '年龄',
                        width: 60
                    },
                    {
                        prop: 'phone',
                        label: '联系方式',
                        width: 80
                    },
                    {
                        prop: 'email',
                        label: '邮箱',
                        width: 90
                    },
                    {
                        prop: 'occupation',
                        label: '职业',
                        width: 60
                    },
                    {
                        prop: 'region',
                        label: '地区',
                        width: 60
                    },
                    {
                        prop: 'payAmount',
                        label: '消费金额',
                        width: 60
                    },
                    {
                        prop: 'ope',
                        label: '操作',
                        width: 90,
                        fixed: 'right',
                        tem: [
                            {
                                operation: '查看',
                                num: 1
                            },
                            {
                                operation: '编辑',
                                num: 2
                            },
                            {
                                operation: '删除',
                                num: 3
                            }
                        ]
                    }
                ],
                pagination: {
                    pagesizes: [10, 20, 30, 40],
                    pagesize: 10,
                    total: 90,
                    pageNo: 1,
                    handleCurrentChange: (cureentPage) => {
                        this.handleCurrentChange(cureentPage)
                    },
                    layout: '->, prev, pager, next, total'
                }
            },
            multipleSelection: [], // 删除信息
            connections: {}, // 获取已存在信息
            delDis: true // 批量删除是否可用
        }
    },
    watch: {
        // 删除信息
        multipleSelection: {
            handler: function (val) {
                (val.length<=1) ? (this.delDis = true) : (this.delDis = false)
            }
        }
    },
    created() {
        const query = {
            sourceName: '',
            sex: this.sourceType,
            pageNum: 1,
            pageSize:10
        }
        this.queryDataSource(query)
    },
    methods: {
        // 关闭新建/编辑浮框
        cancel(val) {
            this.addVisible = val
            this.editRow={}
            if(this.titlename == '用户数据详情'){
                return
            }else{
                this.sourceName=''
                this.sourceType=''
            }
            const query = {
                sourceName: '',
                sex: this.sourceType,
                pageNum: 1,
                pageSize:10
            }
            this.queryDataSource(query)
        },
        // 获取勾选表格行数据
        selectionChange(val) {
            const list = []
            for (const i of val) {
                list.push(i.id)
            }
            this.multipleSelection = list || []
        },
        // 获取操作表格行数据
        row(index, row, num) {
            if (num.num === 1) {
                this.newDis=true
                this.editRow=row
                const query = {
                    sourceId: row.sourceId
                }
                this.newDataSource('details', query)
            }
            if (num.num === 2) {
                this.newDis=false
                this.editRow=row
                const query = {
                    sourceId: row.sourceId
                }
                this.newDataSource('editor', query)
            }
            if (num.num === 3) {
                const query = {
                    userIds:[
                        row.id
                    ] 
                }
                this.batchDeleteDataSourceById(query)
            }
        },
        // 新建/编辑表格
        newDataSource(params, num) {
            // 显示编辑页面
            this.addVisible = true
            // 操作----重新申请
            if (params === 'new') {
                this.newDis=false
                this.titlename = '新建用户数据'
            } else if (params === 'details') {
                this.titlename = '用户数据详情'
                // this.getOneDataSourceDetail(num)
            } else if (params === 'editor') {
                this.titlename = '编辑用户数据'
                // this.getOneDataSourceDetail(num)
            }
        },
        // 表格数据页数切换
        handleCurrentChange(page) {
            this.table.pagination.pageNo = page
            const query = {
                sourceName: this.sourceName || '',
                sex: this.sourceType || '',
                pageNum: page || '1',
                pageSize: 10
            }
            this.queryDataSource(query)
        },
        // 搜索
        searchapi() {
            this.table.pagination.pageNo = 1
            const query = {
                sourceName: this.sourceName || '',
                sex: Number(this.sourceType) || '',
                pageSize:10,
                pageNum: 1
            }
            this.queryDataSource(query)
        },
        // 获取表格数据
        queryDataSource(data) {
            this.table.loading = true
            this.$apis.
                getUserList(data).then(res=>{
                    for(let x in res.data.list){
                        (res.data.list[x].sex == 1)?(res.data.list[x].sex='男'): (res.data.list[x].sex == 2)?(res.data.list[x].sex='女'):res.data.list[x].sex=''
                    }
                    this.table.loading = false
                    this.table.list = res.data.list
                    this.table.pagination.total = res.data.total
                })
                .catch(_=>{
                    this.table.loading = fasle
                })
        },
        // 删除操作
        del() {
            const query = {
                userIds: this.multipleSelection || []
            }
            this.batchDeleteDataSourceById(query)
            this.multipleSelection = ''
        },
        // 删除数据
        batchDeleteDataSourceById(val) {
            this.$confirm('此操作将永久删除该连接信息, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    this.$apis.
                        userDel(val)
                            .then(res =>{
                                this.$message({
                                    type: 'success',
                                    message: '删除成功!'
                                })
                                this.searchapi()
                            })
                            .catch(()=>{
                            return
                        })
                })
                .catch(()=>{
                    this.$message({
                        // type: 'success',
                        message: '删除取消'
                    })
                })
            }
                
    }
}
</script>

<style scoped>
.mask {
    width: 100%;
    z-index: 2001;
}

.L-box {
    padding-top: 12px;
}

.L-search-input {
    width: 192px;
    margin: 0 20px 12px 20px;
}

.dataSourceManagement {
    background: #f0f2f5;
    position: relative;
}

.box {
    position: relative;
    padding: 16px 16px;
    margin: 20px 16px;
    background: #fff;
    box-shadow: 0 2px 4px 0 rgba(97, 160, 230, 0.1);
    border-radius: 8px;
}

.L-s {
    margin: 0 20px;
}

.box-flex {
    display: flex;
    justify-content: space-between;
}
.table {
    margin-top: 12px;
}
.dataSourceManagement .el-table th {
    padding: 0px !important;
}
.el-toolti {
    overflow: hidden;
}
</style>
